<template>
 <div class="fresh_mid" style="height:443px;">
        <div>
            <ul v-for="(product, index) in likeProList" :key="product.id">

                <li style="border: black solid 1px">
                    <a @click.prevent="toProductDetail(product.id)">
                    <div class="name"><span v-html="product.name"></span>
                    </div>
                    <div class="price">
                        <span>￥<span>{{ product.price }}</span></span> &nbsp;
                    </div>
                    <div class="img"><img :src="url + product.fileName" width="185" height="155" /></div>
                    </a>
                </li>
            </ul>
            <h1 v-if="likeProList==null">当前暂无收藏</h1>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()
const likeProList = ref({})
const userId = window.sessionStorage.getItem('id')
const url = "http://192.168.12.159:83/"
//收藏商品列表
const CollectProduct = async () => {  
    const response = await axios.post('/api/selectCollectProduct', {
        userId: userId,
    })
    likeProList.value = response.data.likeProductList 
}

//详情
function toProductDetail(id){
  router.push({
    path: '/productDetail',
    query: {
      id:id
    }
  })
}
onMounted(() => {
  CollectProduct()
})
</script>

<style>
</style>